Express.js

Motivations
- We had to resolve pathnames when we developed a general web server with Node.js. Can we use pathnames in a different way instead of indicating resourse, i.e., files? For example, as some sorts of commands?
- Is there a way to deal with several different types of HTTP method?
- Is there an easier way to develope an application server with the HTTP protocol?

Project

Learning objectives
- Understand the idea of Express.js, a very popular Node framework
- Use of basic features in Express.js

Prerequisites
- Node.js

Express.js
- Fast, unopinionated, minimalist web framework for Node.js
  - Node web application framework
  - Creation of APIs
  - Routing framework
- Typical structure
  - 1. Preparation
    2. Indication of use of middlewares
    3. Support of CORS if necessary
    4. Route handlers
  - Preparation
```
const express = require('express');
const app = express();
const PORT = 3000;  // your port number
...
app.listen(PORT, function (err) {
    if (err) console.log(err);
    console.log("Server listening on PORT", PORT);
});
```
  - Indication of use of middlewares
    (Note that a middleware in Express accesses request and response objects and takes some actions. Possibly modification on them. Refer Using Middlewares.)
```
app.use(...);
// E.g.,
// app.use(express.urlencoded({ extended: false }));  // for the POST query data
//   From Github: The "extended" syntax allows for rich objects and arrays to be encoded into the URL-encoded format, allowing for a JSON-like experience with URL-encoded.
// app.use(express.json());
```
  - Support of Cross-Origin Resource Sharing (CORS) if necessary
    (Note. Different protocol and/or server name and/or port number)
```
// Allow Cross-domain requests, i.e., CORS 
//   Why do we need this?
// all(): any HTTP method; "/*": any path; But you may use a regular explression /.*/ instead,
//                                         because recent versions starting with 5 don't support any paths ending with "*".
app.all('/*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");  // Default: only GET and POST
    next();  // next middleware function; To continue to next operations
});
```
  - Route handlers
    (Note that a route is a combination of a HTTP method type and a path.)
    (Note that paths should start with '/'.)
    (Note that paths could be defined with a regular expression.)
    (Note that paths don't have to be used for resource files.)
```
// get, post, put, delete, ..., all
// E.g., app.post("/echoes", function(req, res) { ... });
// E.g., app.get("/calculations/additions", function(req, res) { ... });
// req and res objects are different from those used in http.createServer().
app.methodname(path, (req, res) => {
    ...
    res.send(...);
})
get.all(path, (req, res) => {
    ...
    res.send(...);
})
```
  - Trial 1: Let's build an Express app to send a message. You need to decide your port number.
    const express = const app = app.???(yourportnumber); // For any routes app.???(???, (req, res) => { ... // Send 'What a wonderful world!' });
    Connect to cs.tru.ca with your account, save the above code in hello_express.js, and complete and run it.
    You can test your express server from a web browser.
    (Note that if you did not install the 'express' module, then install it. $ npm install express)
    
    March 3., 2026 - We had a trouble with "/*" on the latest version of Express. (When we install Express using $npm install express, the version 5.2.1 is installed.) The recent versions starting with 5 have a trouble with any path ending with "*". We can use proper regular expressions such as /(.*)/, or we can install a previous version.
    Let's use /.*/ instead of "/*".
- Application-level|Router-level|Error-handling|]Built-in middlewares
  - express.static() for handling static files
  - express.json() for POST with "content-type: application/json"
  - express.urlencoded() for POST with "content-type: application/x-www-form-urlencoded"
  - Read Express middleware for other middlewares
- How to get query data
  - For the HTTP GET method,
```
app.get(path, (req, res) => {
    ...
    req.query.queryname
    ...
});
```
  - For other HTTP methods, such as POST,
```
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.methodname(path, (req, res) => {
    ...
    req.body.queryname
    ...
});
```
- How to get parameters
  - For any HTTP method,
```
// For example, id in :id is a name of a parameter.
app.get(path/:id, (req, res) => {
    ...
    req.params.id
    ...
});
```
  - We will discuss about this later when we study RESTful web service.
- How to send a message back
  - res.send(message);
- How to use other JavaScript files? E.g., server-side programs in the previous general web server with Node.js.
  (Note that an express app is generally used for an application.)
- req - the request object
  - method
  - path
  - query
  - body
  - cookies
  - ...
- res - the response object
  - set('Content-Type', 'text/html'), ...
  - send() - It automatically sets content-type.
  - json() - To send a JSON response; It also converts non-objects to JSON.
  - end() - To send data; To end without sending any data;
  - status()
  - ...
- Trial 2: Let's build an Express app to echo a message sent from a client-side app. You need to decide your port number and path. The message comes with the HTTP GET method with the query, 'message=...'.
  const express = const app = app.???(yourportnumber); // Your GET route for the echo service app.???(???, (req, res) => { // How to retrieve the GET data? ... });
  Connect to cs.tru.ca with your account, save the above code in echo_express.js, and complete and run it.
  You can test your echo server with http://cs.tru.ca/~mlee/comp4620/Winter2026/5.%20back_end_technologies/echo_calculator_express.html
  Anything wrong? The use of a different port number makes a web browser think that your server-side app is from a different origin.
- Trial 3: Let's build an Express app to echo a message sent from a client-side app. You need to decide your port number and path. The message comes with the HTTP GET method with the query, 'message=...'.
  You need to include the CORS code.
  const express = const app = app.???(yourportnumber); // Allow Cross-domain requests, i.e., CORS ???? // Your GET route for the echo service app.???(???, (req, res) => { // How to retrieve the GET data? ... });
  Connect to cs.tru.ca with your account, save the above code in echo_express.js, and complete and run it.
  You can test your echo server with http://cs.tru.ca/~mlee/comp4620/Winter2026/5.%20back_end_technologies/echo_calculator_express.html
- Trial 4: Let's build an Express app to support four arithmetic operations. You need to decide your port number and path. The message comes with the HTTP POST method with the query, 'opr1=...', 'opr2=...', and 'operation=add'.
  const express = const app = app.???(yourportnumber); app.use(express.urlencoded({ extended: false })); // for the POST method // Allow Cross-domain requests, i.e., CORS ???? // Your POST route for the calculator service app.???(???, (req, res) => { // How to retrieve the POST data? ... });
  Connect to cs.tru.ca with your account, save the above code in calculator_express.js, and complete and run it.
  You can test your calculator server with http://cs.tru.ca/~mlee/comp4620/Winter2026/5.%20back_end_technologies/echo_calculator_express.html
  Can you add more code to support other arithmetic operations?
- We will study Express.js a bit more when we study Web Service later.

Further questions
- How to use HTTPS with Express.js?
- How to build up a web server system?
- How to run an express app in multiple processes?
- Other applications with Express.js?

5.2 Express.js